<template>
  <div class="instrument-board card transparent">
    <div class="board-left">
      <div class="altitude">
        <div class="speed_box">
          <div class="altitude-label">上升速度</div>
          <div class="altitude-value">-0.0m/s</div>
        </div>
        <div class="speed_air">
          <div class="speed_top">
            空速 m/s <span class="speed_value">0.9</span>
          </div>
          <div class="speed_top">地速 0.0 m/s</div>
        </div>
        <div class="speed_box">
          <div class="altitude-label">风速</div>
          <div class="altitude-value">0.0m/s</div>
        </div>
      </div>
      <div class="board-right">
        <div class="compass combined-compass">
          <div class="compass-readouts">
            <div class="angle">
              <div class="angle-label">俯仰角</div>
              <div class="angle-value">0.0</div>
            </div>
            <div class="angle">
              <div class="angle-label">航向角</div>
              <div class="angle-value">354</div>
            </div>
            <div class="angle">
              <div class="angle-label">横滚角</div>
              <div class="angle-value">0.0</div>
            </div>
          </div>
          <div class="compass-rose">
            <span class="marker north">N</span>
            <span class="marker east">E</span>
            <span class="marker south">S</span>
            <span class="marker west">W</span>
            <img
              class="compass-needle"
              src="@/assets/compass.png"
              :style="{
                transform: `translate(-50%, -50%) rotate(${metrics.heading}deg)`,
              }"
            />
            <div
              class="altitude-scale-fill"
              :style="{
                '--fill-percent': `${altitudeFillPercent}%`,
                '--fill-scale': altitudeFillPercent / 100,
                '--tilt-angle': `${altitudeTiltAngle}deg`,
              }"
            ></div>
            <div class="altitude-scale">
              <span
                v-for="tick in altitudeTicks"
                :key="tick.index"
                class="altitude-tick"
                :class="{ short: tick.isShort }"
                :style="{ top: `${tick.position}%` }"
              ></span>
            </div>
            <span
              v-for="degree in degreeLabels"
              :key="degree"
              class="degree-marker"
              :style="getDegreeMarkerStyle(degree)"
            >
              {{ degree }}
            </span>
          </div>
        </div>
      </div>
      <div class="distance">
        <div class="speed_box">
          <div class="altitude-label">飞行时间</div>
          <div class="altitude-value">0.0min</div>
        </div>
        <div class="speed_air">
          <div class="speed_top"><span class="speed_value">-0.0</span>高度</div>
          <div class="speed_top">345 m 海高</div>
        </div>
        <div class="speed_box">
          <div class="altitude-label">距起飞点距离</div>
          <div class="altitude-value">0.0m</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";
const clamp = (value, min, max) => Math.min(max, Math.max(min, value));

const metrics = computed(() => {
  const data = {
    altitude: 1000,
    altitudePercent: 50,
    heading: 45,
    pitch: 30,
    pitchPercent: 30,
    topViewAngle: 60,
  };
  return {
    altitude: data.altitude ?? 0,
    altitudePercent: data.altitudePercent ?? 0,
    heading: data.heading ?? 0,
    pitch: data.pitch ?? 0,
    pitchPercent: data.pitchPercent ?? 0,
    topViewAngle: data.topViewAngle ?? 0,
  };
});

const altitudeFillPercent = computed(() => {
  const percent = Number(metrics.value.altitudePercent);
  if (Number.isFinite(percent) && percent >= 0) {
    return clamp(percent, 0, 100);
  }
  return 0;
});

const normaliseHeading = (heading) => {
  if (!Number.isFinite(heading)) return 0;
  const normalised = ((heading % 360) + 360) % 360;
  return normalised > 180 ? normalised - 360 : normalised;
};

const altitudeTiltAngle = computed(() => {
  const deviation = normaliseHeading(metrics.value.heading);
  const tilt = deviation / 6;
  return clamp(tilt, -18, 18);
});

const altitudeTicks = computed(() => {
  const count = 7;
  const lastIndex = count - 1;
  return Array.from({ length: count }, (_, index) => ({
    index,
    position: (index / lastIndex) * 100,
    isShort: index % 2 === 1,
  }));
});

const degreeLabels = [3, 6, 12, 15, 21, 24, 30, 33];

const getDegreeMarkerStyle = (degree) => {
  const radius = 44;
  const rad = ((degree * 10 - 90) * Math.PI) / 180;
  const top = 50 + Math.sin(rad) * radius;
  const left = 50 + Math.cos(rad) * radius;
  return {
    top: `${top.toFixed(2)}%`,
    left: `${left.toFixed(2)}%`,
  };
};
</script>

<style lang="scss" scoped>
.instrument-board {
  display: flex;
  width: 100%;
  gap: 20px;
  align-items: stretch;
  justify-content: space-between;
}

.card {
  background: rgba(15, 23, 42, 0.35);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 16px;
  padding: 10px;
  display: flex;
  gap: 12px;
  backdrop-filter: blur(12px);
}

.card.transparent {
  background: rgba(15, 23, 42, 0.18);
}

.board-left {
  display: flex;
  flex: 1;
  gap: 10px;
  align-items: flex-end;
  justify-content: center;
}

.metric-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 42, 0.24);
  box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.08);
}

.metric-label {
  font-size: 13px;
  color: #cbd5f5;
  font-weight: 600;
}

.metric-value {
  font-size: 24px;
  font-weight: 600;
  color: #60a5fa;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.metric-value span {
  font-size: 14px;
  color: #cbd5f5;
}

.board-right {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.altitude-scale {
  position: absolute;
  top: 25%;
  bottom: 25%;
  left: 35%;
  right: 35%;
  pointer-events: none;
  z-index: 2;
}

.altitude-tick {
  position: absolute;
  left: 50%;
  width: 60%;
  height: 1px;
  background: rgba(255, 255, 255, 0.7);
  transform: translate(-50%, -50%);
  border-radius: 999px;
}

.altitude-tick.short {
  height: 1.2px;
  width: 100%;
  background: rgba(255, 255, 255, 0.92);
}

.altitude-scale-fill {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130px;
  height: 130px;
  transform: translate(-50%, -50%) rotate(var(--tilt-angle, 0deg));
  pointer-events: none;
  z-index: 1;
}

.altitude-scale-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgb(255, 180, 4) 0%,
    rgba(232, 163, 2, 0.8) 75%
  );
  clip-path: inset(var(--fill-percent) 0 0 0);
  transform-origin: 50% 100%;
  //transform: scaleY(var(--fill-scale, 0));
  box-shadow: 0 0 22px rgba(255, 180, 8, 0.28);
  //opacity: clamp(0, var(--fill-scale, 0), 0.92);
}

.compass {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.compass-rose {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 2px solid rgba(96, 165, 250, 0.45);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(
    circle,
    rgba(96, 165, 250, 0.16),
    rgba(15, 23, 42, 0.98)
  );
  overflow: hidden;
}

.compass-rose .marker {
  position: absolute;
  font-size: 11px;
  font-weight: 600;
  color: #60a5fa;
}
.degree-marker {
  position: absolute;
  font-size: 10px;
  color: rgba(226, 232, 240, 0.72);
  font-weight: 500;
  transform: translate(-50%, -50%);
  letter-spacing: 0.3px;
  pointer-events: none;
  z-index: 3;
}
.compass-rose .north {
  top: 6px;
}
.compass-rose .south {
  bottom: 6px;
}
.compass-rose .east {
  right: 6px;
}
.compass-rose .west {
  left: 6px;
}

.compass-needle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  transform-origin: center center;
  z-index: 4;
  pointer-events: none;
}

.compass-readouts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  .angle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    .angle-label {
      font-size: 11px;
      color: #cbd5f5;
    }
    .angle-value {
      font-size: 16px;
      font-weight: 600;
      color: #23c343;
    }
  }
}

.compass-value {
  font-size: 18px;
  font-weight: 600;
  color: #f9fafb;
}

.topview-value {
  font-size: 12px;
  color: #cbd5f5;
}

.angle-scale {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.16);
}

.angle-indicator {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #60a5fa, #2563eb);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
  border: 2px solid rgba(15, 23, 42, 0.9);
}

.altitude,
.distance {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  text-align: right;
  .speed_box {
    .altitude-label {
      font-size: 11px;
      color: #fff;
    }
    .altitude-value {
      font-size: 16px;
      font-weight: 600;
      color: #23c343;
    }
  }
  .speed_air {
    font-size: 12px;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    .speed_value {
      font-size: 16px;
      font-weight: 600;
      color: #23c343;
    }
  }
}

.distance {
  align-items: flex-start;
  text-align: left;
}
</style>
